﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="qingjiaAdd.aspx.cs" Inherits="weixin.crm.qingjiaAdd" %>

<!DOCTYPE html>
<html lang="en" style="overflow: hidden;">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>请假申请</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" media="screen" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link href="css/layui/css/layui.css" rel="stylesheet" />
    <script src="css/layui/layui.js"></script>
    <script src="css/jquery-2.1.0.min.js"></script>
    <script src="css/float.js"></script>
    <script src="css/spark-md5.js"></script>
    <script type="text/javascript">
        var form = null, laytpl = null, layer = null, laydate = null;
        layui.use(['form'], function () {
            form = layui.form;
            $.getJSON("api.ashx?Action=getpartemp&rnd=" + Math.random(), function (data) {
                $("#proxy").append('<option value=""></option>');
                $.each(data.list, function (i, row) {
                    $("#proxy").append('<option value="' + row.id + '">' + row.name + '</option>');
                });
                $.each(data.datelist, function (i, row) {
                    $("#sdate").append('<option value="' + row.val + '">' + row.key + '</option>');
                });
                form.render();
            });
            for (var i = 8; i <= 18; i++) {
                $("#sh").append('<option value="' + fix(i, 2) + '">' + fix(i, 2) + '</option>');
                $("#eh").append('<option value="' + fix(i, 2) + '">' + fix(i, 2) + '</option>');
            }
            for (var i = 0; i < 60; i = i + 5) {
                $("#sm").append('<option value="' + fix(i, 2) + '">' + fix(i, 2) + '</option>');
                $("#em").append('<option value="' + fix(i, 2) + '">' + fix(i, 2) + '</option>');
            }
            form.render();
            page.init();
        });
        function fix(num, length) {
            return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num;
        }
        function back() {
            if ($('#remark').val() == '') {
                window.location.href = 'qinjialist.aspx';
            }
            else {
                if (confirm("您有未提交的数据，是否确认返回？")) {
                    window.location.href = 'qinjialist.aspx';
                }
            }
        }
        function guid() {
            function S4() {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            }
            return (S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4());
        }
        var page = {
            init: function () {
                $("#upload").click($.proxy(this.upload, this));
                $("#file").change($.proxy(this.change, this));
            },
            change: function () {
                var file = $("#file")[0].files[0],  //文件对象
                    name = file.name,        //文件名
                    size = file.size;        //总大小
                var _fileSize = file.size * 1.0 / 1024 / 1024;
                if (_fileSize > 1024) {
                    fileSize = (_fileSize / 1024).toFixed(2) + "G";
                }
                else {
                    fileSize = (_fileSize).toFixed(2) + "M";
                }
                $("#filename").text(name + "(" + fileSize + ")");
                $("#output").html('等待上传...');
                var reader = new FileReader();
                reader.readAsText(file.slice(0, 20 * 1024 * 1024), 'utf-8');
                reader.onload = function (e) {
                    //console.info(reader.result);
                    var spark = new SparkMD5();
                    spark.append(reader.result);
                    //console.log(spark.end());
                    window['uuid'] = spark.end();
                    $.post("api.ashx?Action=getuploadchunkssize", { "temppath": window['uuid'], name: name }, function (data) {
                        if (data.success == false) {
                            $("#output").html(data.info);
                            return;
                        }
                        window["uutotal"] = data.total; window["uutotalFiles"] = data.totalFiles;
                    }, "json");
                }
            },
            upload: function () {
                if (typeof $("#file")[0].files[0] == "undefined") {
                    alert("请选择文件");
                    return;
                }
                var file = $("#file")[0].files[0],  //文件对象
                    name = file.name,        //文件名
                    size = file.size,        //总大小
                    succeed = 0;
                var shardSize = 100 * 1024,    //以2MB为一个分片
                    shardCount = Math.ceil(size / shardSize);  //总片数
                var $percent = $("#gress"), $gress = $("#pro");
                $gress.show();
                var md5 = window['uuid'] || guid();
                $("#prodiv").show();
                var mflag = true;
                for (var i = 0; i < shardCount; ++i) {
                    if (!mflag) {
                        break;
                    }
                    //计算每一片的起始与结束位置
                    var start = i * shardSize,
                        end = Math.min(size, start + shardSize);
                    //构造一个表单，FormData是HTML5新增的
                    var form = new FormData();
                    form.append("data", file.slice(start, end));  //slice方法用于切出文件的一部分
                    form.append("name", name);
                    form.append("temppath", md5);
                    form.append("chunks", shardCount);  //总片数
                    form.append("chunk", i);        //当前是第几片
                    if ($.inArray(i, window["uutotalFiles"]) >= 0) {
                        ++succeed;
                        //$("#output").text(succeed + " / " + shardCount);
                        var percentage = succeed * 1.0 / shardCount;
                        if (Math.floor(percentage * 100) == 100) {
                            $("#output").html('文件处理中...');
                        } else {
                            $("#output").html('上传中,文件大小' + fileSize + ',已上传进度&nbsp;' + (percentage * 100).toFixed(2) + '%');
                        }
                        $percent.css('width', percentage * 100 + '%');
                        continue;
                    }
                    //Ajax提交
                    $.ajax({
                        url: "api.ashx?Action=upload",
                        type: "POST",
                        data: form,
                        timeout: 60 * 3600,
                        dataType: "json",
                        async: true,        //异步
                        processData: false,  //很重要，告诉jquery不要对form进行处理
                        contentType: false,  //很重要，指定为false才能形成正确的Content-Type
                        success: function (data) {
                            if (data.success == false) {
                                mflag = false;
                                $("#output").html(data.info);
                                $gress.hide();
                                $("#prodiv").hide();
                                return;
                            }
                            ++succeed;
                            var percentage = succeed * 1.0 / shardCount;
                            if (Math.floor(percentage * 100) == 100) {
                                $("#output").html('文件处理中...');
                            } else {
                                $("#output").html('上传中,文件大小' + fileSize + ',已上传进度&nbsp;' + (percentage * 100).toFixed(2) + '%');
                            }
                            $percent.css('width', percentage * 100 + '%');
                            if (data.success == true) {
                                $("#output").html('上传成功');
                                $gress.hide();
                                $("#prodiv").hide();
                                $("#attach").val(data.path);
                                $("#prew>img").prop("src", '<%=weixin.crm.basepage.Domain%>' + data.path);
                                $("#prew").show();
                            }
                        }
                    });
                }
            }
        };
    </script>
    <style>
        .item {
            width: 80%;
            margin: 0 auto;
            min-height: 380px;
            max-height: 500px;
            z-index: 9999;
            border-radius: 10px;
            display: block;
            position: absolute;
            left: 10%;
            background-color: #fff;
            padding: 10px;
            box-sizing: border-box;
            top: 8%;
        }
    </style>
</head>
<body style="overflow-x: hidden; overflow-y: auto;">
    <form class="layui-form layui-form-pane" action="">
        <div>
            <div style="background-color: #fff; padding: 3px; border-radius: 3px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">请假类型</label>
                    <div class="layui-input-block">
                        <select id="itype" style="width: 100px; height: 26px;">
                            <option value="1">事假</option>
                            <option value="2">婚假</option>
                            <option value="3">年休假</option>
                            <option value="4">产假</option>
                        </select>
                    </div>
                </div>
                <div style="background-color: #fff; padding: 3px; border-radius: 3px;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">请假日期</label>
                        <div class="layui-input-block">
                            <select id="sdate" style="width: 100px; height: 26px;"></select>
                        </div>
                    </div>
                    <div style="background-color: #fff; padding: 3px; border-radius: 3px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">时间段</label>
                            <div class="layui-input-block">
                                <div style="width: 23%; float: left;">
                                    <select id="sh" style="width: 100%; height: 26px;"></select>
                                </div>
                                <div style="width: 25%; float: left;">
                                    <select id="sm" style="width: 100%; height: 26px;"></select>
                                </div>
                                <div style="width: 2%; float: left; height: 30px; line-height: 30px;">
                                    <label style="border-top: 2px solid #000; width: 100%; display: block; margin-top: 18px;"></label>
                                </div>
                                <div style="width: 23%; float: left;">
                                    <select id="eh" style="width: 100%; height: 26px;"></select>
                                </div>
                                <div style="width: 25%; float: left;">
                                    <select id="em" style="width: 100%; height: 26px;"></select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">合计小时</label>
                            <div class="layui-input-block">
                                <input id="times" name="times" class="layui-input" placeholder="合计小时" value="" type="text">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div style="margin-left: 0;" class="layui-input-block">
                                <textarea id="reason" placeholder="请输入请假事由" style="width: 100%; border: solid 1px #ccc; height: 60px; margin-top: 10px; resize: none; border-radius: 10px; padding: 10px; box-sizing: border-box;" maxlength="100" cols="3" row="3"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">工作代理人</label>
                            <div class="layui-input-block">
                                <select id="proxy" style="width: 100%; height: 26px;"></select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">附件信息</label>
                            <div class="layui-input-block" style="border: 1px solid #e6e6e6;">
                                <div style="width: 80%; float: left; position: relative;">
                                    <input style="width: 100%; height: 35px; line-height: 36px; position: absolute; top: 0; left: 0; z-index: 99; opacity: 0;" type="file" id="file" />
                                    <div class="login-button" style="margin-top: 0; width: 99%; height: 36px; line-height: 36px; z-index: 90; position: absolute; top: 0; left: 0; background-color: rgba(220, 175, 58, 0.98);">选择文件+</div>
                                </div>
                                <div style="width: 20%; float: right;">
                                    <div id="upload" class="login-button" style="margin-top: 0; width: auto; height: 36px; line-height: 36px; background-color: rgba(220, 175, 58, 0.98);">上传</div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上传信息</label>
                            <div class="layui-input-block" style="border: 1px solid #e6e6e6;">
                                <div id="output" style="font-size: 12px; height: 36px; line-height: 36px;">选择文件</div>
                                <div id="filename" style="display: none;"></div>
                                <input style="width: 100%;" type="hidden" name="attach" id="attach" />
                            </div>
                        </div>
                        <div class="layui-form-item" id="prodiv" style="display: none;">
                            <label class="layui-form-label">上传进度</label>
                            <div class="layui-input-block" style="border: 1px solid #e6e6e6;">
                                <div id="pro" style="width: 100%; height: 35px; border: 1px solid #ccc; display: none;">
                                    <div id="gress" style="width: 0; height: 35px; background-color: Green;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item" id="prew" style="display: none;">
                            <img alt="" src="" style="width: 100%; height: auto; max-height: 260px;" />
                        </div>
                        <p>
                            <div onclick="postdata();" style="width: 100%; margin-top: 25px;" class="login-button btn-sign">提交申请</div>
                            <div onclick="back();" style="width: 100%; margin-top: 5px; background-color: #ccc;" class="login-button">返回</div>
                        </p>
                    </div>
                </div>
            </div>
    </form>
</body>
</html>
<script>
    var form = null, layer = null, table = null;
    layui.use(['form', 'table'], function () {
        form = layui.form; layer = layui.layer; table = layui.table;
    });
    function postdata() {
        if (isNaN(parseInt($("#times").val()))) {
            alert('合计时间不能为空');
            return;
        }
        var times = [];
        obj = { ds: $("#sdate>option:selected").val(), ts: $("#sh>option:selected").val() + ":" + $("#sm>option:selected").val(), td: $("#eh>option:selected").val() + ":" + $("#em>option:selected").val(), total: $("#times").val() };
        times.push(obj);
        $.ajax({
            url: "api.ashx?rnd=" + Math.random(),
            type: "POST",
            data: {
                Action: "qingjiasave",
                reason: $("#reason").val(),
                attach: $("#attach").val(),
                itype: $("#itype").find("option:selected").text(),
                itypeid: $("#itype").find("option:selected").val(),
                proxy_name: $("#proxy").find("option:selected").text(),
                proxy_id: $("#proxy").find("option:selected").val(),
                times: JSON.stringify(times)
            },
            dataType: "json",
            success: function (data) {
                if (data.success == true) {
                    alert('保存成功！');
                    window.location.href = "qinjialist.aspx";
                }
                else {
                    alert('保存失败,' + data.info);
                }
            },
            error: function () {
                alert('保存失败！');
            }
        });
    }
</script>
